<template>
  <div
    class="portal-page-container"
    v-loading="loading"
    element-loading-text="数据加载中..."
  >
    <visual-page
      v-if="!loading"
      :pageInfo="pageInfo"
      :globalParam="globalParam"
    />
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref, watch } from "vue";
import VisualPage from "@/visual/view/page.vue";
import { useRoute } from 'vue-router';
import { getPage } from '@/utils/codeless';

const route = useRoute();
const loading = ref(true);
const pageInfo = ref({});
const globalParam = ref({});
const instance = getCurrentInstance();
const pageId = instance?.type?.pageId;

const init = async() => {
  loading.value = true;
  pageInfo.value = await getPage(pageId);
  if (pageInfo.value.paramList && route.query) {
    const params = {};
    pageInfo.value.paramList.forEach(param => {
      params[param.id] = route.query[param.name] || '';
    });
    globalParam.value = params;
  }
  loading.value = false;
};

watch(() => route.query, () => {
  init();
}, {deep: true});

onMounted(() => {
  init();
});
</script>

<style>
#app {
  background: #eee;
  box-sizing: border-box;
}
</style>
<style scoped>
.portal-page-container {
  box-sizing: border-box;
}
</style>